import React from "react";
import {Card} from "antd";
import {Router,Route,Link,browserHistory} from "react-router";

export default class PCNewsImageBlock extends React.Component{

  constructor(){
    super();
    this.state = {
      news:""
    }
  };

  componentWillMount(){
    var myFetchOptions = {
      method:"GET"
    };
    fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type="+this.props.type+"&count="+this.props.count,myFetchOptions)
      .then(response => response.json())
      .then(json => {
        this.setState({
          news: json
        })
      });
  };

  render(){
    //定义模块内部style的styleImages
    const styleImages = {
      display:"block",
      width:this.props.imageWidth,
      height:"90px"
    };
    //定义模块内部style的styleH3
    const styleH3 = {
      width:this.props.imageWidth,
      whiteSpace:"nowrap",
      overflow:"hidden",
      textOverflow:"ellipsis"
    };

    const {news} = this.state;
    const newsList = news.length
      ?
      news.map((newsItem,index) => (
        <div key={index} class="imageblock">
          <Link to={`details/${newsItem.uniquekey}`} target="_black">
            <div class="coutom-image">
              {/*父模块定义子模块的style参数*/}
              <img src={newsItem.thumbnail_pic_s} alt="新闻图片" style={styleImages}/>
            </div>
            <div class="custom-card">
              <h3 style={styleH3}>{newsItem.title}</h3>
              <p>{newsItem.author_name}</p>
            </div>
          </Link>
        </div>
      ))
      :
      "没有加载到任何新闻"
    ;

    return(
      <div class="topNewsList">
        {/*style中可以传递参数*/}
        <Card title={this.props.cartTitle} bordered={true} style={{width:this.props.width}}>
          {newsList}
        </Card>
      </div>
    );
  };
}

